<!doctype html>
<html lang="en">
	<head>
		<meta charset= "utf-8"/>
		<title>Final Project - Space and Earth Exploration</title>
		<script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
		<script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
		<script src="scripts/scripts.js" language="javascript"></script>
		<script src="scripts/hotspots.js" language="javascript"></script>
		<link href="styles/styles.css" rel="stylesheet" type="text/css"/>

	</head>
	
	<body onLoad="javascript:visitSunpage1()">
		
			<div id="logo">
			<div><img  src="images/mastermindlogo1.png" width="230px" alt="The logo" title="The logo"/></div>
			</div><br>
					
				<header><img src="images/sun-header.png" alt="Sun Header" title="Sun Header"/></header><br/><br/>

				<nav id="navigation">
				    	<div class="barbuttons2"><a href= "home-page.html">Home</a></div>
	    				<div class="barbuttons2"><a href= "moon-page1.html">Moon</a></div>
	    				<div class="barbuttons2"><a href= "sun-page1.html">Sun</a></div>
						<div class="barbuttons2"><a href="earth-page1.html" >Earth</a></div>
			
						<div id="test-Link" ><a href="final-test.html"><strong>TEST</strong></a></div>
						</nav><br/> <br/>
			
			<section>
				<div id="container">
					 <div id="leftBar">
					
				 			<div id="hs3" onmouseover="javascript:showTextPage( 2 )"
					   		onmouseout="javascript:hideOutputPages()"><p><strong>Fun Facts</strong></p>
					   		</div>
						<div id="output2">
							<div id="output-box2">
								<p id="output-text2">asdf</p>
							</div>
						</div>
					  </div>
					
				    				
						<section>
				 			 <div id="content">
				 			 				    			
				    			<div id="video">
								   <video controls="controls"  width="450px">
										<source src="video/sun-video.mp4" type="video/mp4"/> 
										<source src="video/sun-video.ogv" type="video/ogg"/>
									</video>
									</div><br/>
									
				    			<article id="objectives">

									
				    			<p><strong>Objectives:</strong><br/>
														you will learn about formation of sun and what made it. also you
														Know about sun’s age. Solar system formation and eclipse will be explained
														In the next page. The important of the green energy is the next subject.
				    			
									
				    			</p>
				    			</article><br/>
				    			
				    			<article class="topic-main-page">
				    			<p><strong>Explore</strong> how sun was formed, sun’s age and materials...
				    			<a class="read-more"href="sun-page2.html">Read More</a>
				    			</p>
				    			</article><br/>
				    			
				    			<article class="topic-main-page">
				    			<p><strong>Explore</strong> solar eclipse is and how it happens, the different types of solar eclipse...
				    			<a class="read-more" href="sun-page3.html">Read More</a>
				    			</p>
				    			</article><br/>
				    			
				    			<article class="topic-main-page">
				    			<p><strong>Explore</strong> green energy, solar power and solar thermal collectors, and advantages and disadvantages of sun’s radiation...
										<a class="read-more" href="sun-page4.html">Read More</a>
				    			</p>
				    			</article><br/>
							
		
								
				  			</div>
				  		</section>
				  
					  <div id="rightBar2">

				  	    <aside>
							<header>
								<p id="aside-title-audio">Audio</p>
							</header>
								<audio id="narration2" controls="controls">
									<source src="audio/sunobjective.mp3" type="audio/mp3">
									<source src="audio/sunobjective.ogg" type="audio/ogg">
								</audio><br/>
								
							<header>
								<p id="aside-title-audio">Transcript</p>
							</header>
							<div id="transcript">
									<p>The objective of this section is to learn important facts about the sun. 
									Explore the sun’s formation, a solar eclipse and learn about solar energy. 
									Please click on the “read more” link to learn more.</p>
							
							</div>
							</aside>
							  
				  		
					  </div>
					  
					  
					</div>
				 
					<div id="footer"><br/>
					    <a class="movingButtons" href="sun-page2.html">Next</a>	  
					</div>
		
		</section>
		
	</body>

</html>